<template>
    <div class="home-head">
        <div class="logo-section">
            <img src="@/assets/logo-topbar.gif" alt="JPetStore" class="logo" />
        </div>
        <div class="nav-section">
            <div class="search-box">
                <input type="text" placeholder="Search..." />
                <button class="search-btn">Search</button>
            </div>
            <div class="nav-links">
                <button @click="toCart" class="nav-link"><img src="@/assets/cart.gif" alt="Cart"
                        class="cart-icon" /></button>
                <span class="separator">|</span>
                <div v-if="!isLoggedIn">
                    <button @click="signIn" class="nav-link">Sign In</button>
                    <span class="separator">|</span>
                    <button @click="register" class="nav-link">Register</button>
                </div>
                <div v-else>
                    <el-icon class="nav-link" @click="toUserInfo">
                        <User />
                    </el-icon>
                </div>
                <span class="separator">|</span>
                <RouterLink to="/help" class="nav-link">?</RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import router from '../router';
import store from '@/store';
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'

// 获取用户是否登录
const isLoggedIn = ref(store.getters.getLoginStatus)
// 跳转到登录页面
const signIn = () => {
    //componentName.value = 'LoginComponent'
    router.push('/login')
}
// 跳转到注册页面
const register = () => {
    //componentName.value = 'RegisterComponent'
    router.push('/register')
}

// 处理按钮点击事件
const navigateToCategory = (categoryId: string) => {
    router.push(`/category/${categoryId}`)
}
// 跳转到用户信息页面
const toUserInfo = () => {
    router.push('/userInfo')
}
// 跳转到购物车页面
const toCart = () => {
    if (isLoggedIn.value) {


        window.location.href = "/page2.html"  // 直接跳转到购物车页面
    } else {
        ElMessage.warning('请先登录');
    }
};
</script>

<style>
.home {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 15%;
}

.logo-section {
    display: flex;
    align-items: center;
}

.logo {
    height: auto;
}

.nav-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    display: flex;
    gap: 5px;
    align-items: right;
}

.search-box input {
    padding: 5px;
    border: 1px solid #ccc;
}

.search-btn {
    background-color: #666;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 10px;

}

.cart-icon {
    height: 20px;
}

.nav-link {
    color: #ffa500;
    text-decoration: none;
    border: none;
    background-color: transparent;
    font-size: 16px;
    cursor: pointer;
}

.separator {
    color: #0095fff3;
}
</style>
